<style>
<!--
{literal}
#serviceListDiv {
    
}
{/literal}
-->
</style>
<div style="margin-top: 3px;">
	<table id="serviceListTbl" class="grid" cellspacing="0" cellpadding="0" border="0" style="width: 100%">
	    <tbody>
	    {if !empty($serviceList)}
		{foreach from=$serviceList item=item}
		    <tr>
	            <td style="width: 400px;" class="first"><div style="white-space: normal" id="serviceName_{$item.pay_payment_item_id}">{if !empty($item.service_code)}{$item.service_code} {/if}{$item.service_name}</div></td>
		        <td style="width: 100px;">{$item.unit}</td>
				<td style="width: 100px;" class="field-number">{$item.quantity}</td>
				<td style="width: 120px;" class="field-number">{$item.unit_price_formatted}</td>                                             
				<td style="width: 120px;" class="field-number">{$item.original_price_formatted}</td>
				<td class='last action'>
				   <div>
				   {if  $item.collected eq 0}  
						<div id="{$item.pay_payment_item_id}_btn" >
						    <a href="javascript:deleteServiceItem({$item.pay_payment_item_id})"  title="{translate}Delete{/translate}">
						        <img src="../images/remove_small_16x16.png" alt="{translate}Delete{/translate}"></img> 
						    </a>
						</div>
						<div id="{$item.pay_payment_item_id}_loader" style="display: none;">
						    <img  src="../images/ajax-loader-small.gif">
						</div>
				   </div>
				   {/if}
				</td>     
		    </tr>
		{/foreach}
		{else}
		    <tr><td class="first last">{translate}The patient has no information on payment items{/translate}</td></tr>
		{/if}
		</tbody>
	</table>
</div>